import React from 'react'
import { GetServerSideProps } from 'next/types'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { Link } from '@mui/material'

import { getBlogById } from '@/api/blog'
import { PostWrap } from '@/components/pages/post/styled'
import dayjs from '@/utils/date-format'
import { AppLayout } from '@/layout'
import MarkdownRenderer from '@/components/MarkdownRenderer'
import { useMode } from '@/components/ThemeProvider'

function PostPage({ post }) {
  const mode = useMode()
  const router = useRouter()
  return (
    <AppLayout>
      <Head>
        <title>{post.title}</title>
      </Head>
      <PostWrap>
        <div className="post-header">
          <h1 className="post-title">{post.title}</h1>
          <p className="sub-text">
            创建于 {dayjs(post.createTime).format('YYYY-MM-DD HH:mm')}
          </p>
        </div>
        <div className="post-content ">
          <MarkdownRenderer content={post.content} />
        </div>
        <div className="post-footer">
          <p className="sub-text">
            SunMoon 最后修改于{' '}
            {dayjs(post.updateTime).format('YYYY-MM-DD HH:mm')}
          </p>
          <div className="divider" />
          <div className="tags-wrap">
            {post.tags &&
              post.tags.map((tag) => (
                <Link
                  className="post-tag"
                  key={tag.name}
                  underline="none"
                  onClick={() => router.push(`/tag/${tag.name}`)}
                >
                  {tag.name}
                </Link>
              ))}
          </div>
        </div>
      </PostWrap>
    </AppLayout>
  )
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { query } = context
  const res = await getBlogById('', query.id)
  return {
    props: {
      post: res.data,
    },
  }
}

export default PostPage
